import { Flex } from '@chakra-ui/react';

import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit';
import { memo } from 'react';
import ImageToImageStrength from './TFSDXLNoWrapImageToImageStrength';
import TFInitialImageDisplay from 'features/parameters/components/Parameters/ImageToImage/TFInitialImageDisplay';

const TFSDXLImageToImageTabCoreParameters = () => {

  return (
    <Flex
      layerStyle="first"
      sx={{
        position: 'relative',
        flexDirection: 'column',
        width: 'full',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 'base',
        p: 3,
        gap: 4,
      }}
    >
      <TFInitialImageDisplay />
      <Flex direction="column" gap="3" w="full">
        <ImageToImageStrength />
        <ImageToImageFit />
      </Flex>
    </Flex>
  );
};

export default memo(TFSDXLImageToImageTabCoreParameters);
